<template>
  <div class="echarts">
    <h2>Echars图表-数据皆为静态数据，点击下面按钮重新生成随机静态数据</h2>
    <p>
      <a-button type="primary" @click="updateData('all')">全部刷新</a-button>
    </p>
    <p>
      <a-button
        type="primary"
        @click="updateData(item.name)"
        v-for="(item, index) in update"
        :key="index"
        >{{ item.name }}</a-button
      >
    </p>
    <div class="box" v-if="allUpdate">
      <div class="inline-box" v-for="(chart, index) in charts" :key="index">
        <echart
          :options="chart.fn()"
          :chartName="chart.name"
          v-if="update[index].isShow"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Echarts",
};
</script>

<script setup>
import { ref } from "vue";
import {
  barChart,
  dotChart,
  pieChart,
  redarChart,
  lineChart,
  sunChart,
  punchChart,
  dateChart,
} from "@/components/charts/options.js";
import echart from "@/components/charts/echart.vue";

let allUpdate = ref(true);

const update = ref([
  { isShow: true, name: "散点图" },
  { isShow: true, name: "饼状图" },
  { isShow: true, name: "雷达图" },
  { isShow: true, name: "柱状图" },
  { isShow: true, name: "折线图" },
  { isShow: true, name: "旭日图" },
  { isShow: true, name: "八宫图" },
  { isShow: true, name: "日期图" },
]);

const charts = [
  { fn: dotChart, name: "dotChart" },
  { fn: pieChart, name: "pieChart" },
  { fn: redarChart, name: "redarChart" },
  { fn: barChart, name: "barChart" },
  { fn: lineChart, name: "lineChart" },
  { fn: sunChart, name: "sunChart" },
  { fn: punchChart, name: "punchChart" },
  { fn: dateChart, name: "dateChart" },
];

const updateData = (val) => {
  if (val === "all") {
    allUpdate.value = false;
    setTimeout(() => {
      allUpdate.value = true;
    }, 0);
  } else {
    update.value[
      update.value.findIndex((item) => item.name === val)
    ].isShow = false;
    setTimeout(() => {
      update.value[
        update.value.findIndex((item) => item.name === val)
      ].isShow = true;
    }, 0);
  }
};
</script>

<style scoped lang="scss">
.echarts {
  h2 {
    text-align: center;
  }

  p {
    width: 60%;
    display: flex;
    justify-content: space-between;

    button {
      margin-left: 5px;
    }
  }

  .box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    overflow: auto;
    height: 66vh;
    .inline-box {
      position: relative;
      width: 25%;
      height: 45%;
      background-color: #4338dc;
      margin-top: 20px;
      border: solid 1px #fff;
      .text {
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 14px;
        transform: translateY(-25px);
      }
    }
  }
}
</style>
